import * as React from 'react';
import { Form, DatePicker, Badge } from '@teamix/ui';
import { YunxiaoIcon, ButtonIcon } from '@alife/devops-ui';
import dayjs from 'dayjs';
import MemberTrigger from 'components/memberTrigger';
import Popup from 'components/popup';
import intl from '../../../../../../../../../../locale';

const { RangePicker } = DatePicker;
const formItemLayout = {
  labelCol: {
    span: 6,
  },

  wrapperCol: {
    fixedSpan: 12,
  },
};

export default class FilterForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      memberData: [],
      dateRange: [],
    };
  }

  updateTableParams = (obj) => {
    const tableParams = { ...this.props.tableParams, ...obj };
    this.props.updateRecordParams(tableParams);
  };

  onResetClick = () => {
    this.setState({
      memberData: [],
      dateRange: [],
    });

    this.props.updateRecordParams({
      author_ids: '',
      begin_date: '',
      end_date: '',
    });
  };

  render() {
    const { dateRange, memberData } = this.state;
    return (
      <Popup
        trigger={
          <Badge dot={memberData.length || dateRange.length}>
            <ButtonIcon name="filter-line" />
          </Badge>
        }
        triggerType="click"
        followTrigger
        size="large"
        footer={
          <Form.Item style={{ marginBottom: 0 }}>
            <Form.Reset
              text
              type="primary"
              style={{ border: 0 }}
              onClick={this.onResetClick}
              toDefault
            >
              <YunxiaoIcon type="delete-line" />
              {intl.get({
                id: 'code-assets.containers.deleteRecord.filter.ClearAllFilterConditions',
                defaultMessage: '清除所有筛选条件',
              })}
            </Form.Reset>
          </Form.Item>
        }
      >
        <Form {...formItemLayout} labelTextAlign="left">
          <Form.Item
            label={intl.get({
              id: 'code-assets.containers.deleteRecord.filter.Operator',
              defaultMessage: '操作人',
            })}
          >
            <div
              ref={(o) => {
                this.opcontainer = o;
              }}
            >
              <MemberTrigger
                onChange={(users) => {
                  this.setState({
                    memberData: users,
                  });

                  const author_ids = users.map((item) => item._userId).join();
                  this.updateTableParams({ author_ids });
                }}
                value={this.state.memberData}
                container={() => this.opcontainer}
                multiple
              />
            </div>
          </Form.Item>
          <Form.Item
            label={intl.get({
              id: 'code-assets.containers.deleteRecord.filter.OperationTime',
              defaultMessage: '操作时间',
            })}
          >
            <RangePicker
              followTrigger
              popupAlign="tr br"
              value={dateRange}
              onChange={(value) => {
                this.setState({
                  dateRange: value,
                });
              }}
              onOk={(value) => {
                this.updateTableParams({
                  begin_date: dayjs(value[0]).format('YYYY-MM-DD'),
                  end_date: dayjs(value[1]).format('YYYY-MM-DD'),
                });
              }}
            />
          </Form.Item>
        </Form>
      </Popup>
    );
  }
}
